import { defineComponent } from 'vue';
import { RouterLink, RouterView } from 'vue-router';
import { NFlex, NImage, NButton, NDivider } from 'naive-ui';
import { useI18n } from 'vue-i18n';

import CibrFooter from './components/CibrFooter';

import logo from '@/assets/logo.svg';

export default defineComponent({
  setup() {
    const { t, locale } = useI18n();

    const navItems = [
      { path: '/', name: 'app.home' },
      { path: '/service', name: 'app.service' },
      { path: '/appointment', name: 'app.appointment' },
      { path: '/learn', name: 'app.learn' }
    ];

    function changeLocaleS2T() {
      switch (locale.value) {
        case 'zhCN':
        case 'en':
          locale.value = 'zhTW';
          break;
        case 'zhTW':
          locale.value = 'zhCN';
          break;
        default:
          locale.value = 'zhCN';
          break;
      }
    }

    function changeLocaleCN2EN() {
      switch (locale.value) {
        case 'zhCN':
        case 'zhTW':
          locale.value = 'en';
          break;
        case 'en':
          locale.value = 'zhCN';
          break;
        default:
          locale.value = 'en';
          break;
      }
    }

    return () => (
      <div class="flex flex-col min-h-screen">
        <header class="p-3 border-b">
          <NFlex justify="space-between" align="center">
            <NImage width={48} src={logo} />
            <NFlex align="center">
              <nav class="flex space-x-4">
                {navItems.map((item) => (
                  <RouterLink
                    to={item.path}
                    class="px-4 py-2 rounded transition duration-300 ease-in-out hover:bg-red-200"
                    active-class="bg-cibr-red text-white hover:bg-cibr-red"
                  >
                    {t(item.name)}
                  </RouterLink>
                ))}
              </nav>
              <NDivider vertical />
              <NFlex vertical>
                <NButton quaternary size="tiny" onClick={changeLocaleS2T}>
                  {['zhCN', 'en'].includes(locale.value) ? '繁體中文' : '简体中文'}
                </NButton>
                <NButton quaternary size="tiny" onClick={changeLocaleCN2EN}>
                  {locale.value === 'en' ? '简体中文' : 'ENGLISH'}
                </NButton>
              </NFlex>
            </NFlex>
          </NFlex>
        </header>
        <RouterView class="flex-1"></RouterView>
        <footer>
          <CibrFooter />
        </footer>
      </div>
    );
  }
});
